<template>
  <div class="select-brand-detail page_pos_style" :style="{ top: `${phoneStatusBarHeight}`}">
    <!-- 导航 -->
    <!-- <div class="navbar" style="padding-top: 50px">
      <div class="navbar-back" @click="goback">
        <van-icon @click="goback" name="arrow-left" />
      </div>
      <div class="navbar-close"><van-icon name="cross" /></div>
      <div class="navbar-title">{{ this.$route.query.biName }}</div>
      <div class="navbar-close" ></div>
      <div class="navbar-close" ></div>
    </div> -->
    
    <navbar :title="$route.query.biName"></navbar>
    <div class="blank"></div>
    <!-- 车型详情 -->
    <div class="page_pos_scroll" :style="{ top: `${phoneStatusBarHeight}`,marginTop:'12vw'}">
      <div v-for="(item, index) in carType" :key="index" class="car-type-item">
        <van-cell 
        :title="item.vtdName" 
        @click="goDetail(item)" 
        :value="(item.changshangzhidaojiaD === 0)? '面议': item.changshangzhidaojiaD+'万'"
        />
      </div>
    </div>
  </div>
</template>

<script>
import { getVtdname } from "./api";

export default {
  data() {
    return {
      carType: [],
        // 获取屏幕状态栏高度
        phoneStatusBarHeight:''
    }
  },
  methods: {
    goback() {
      this.$router.go(-1)
    },
    async getCarType() {
      let params = {
        chexi:this.$route.query.biName
      }
      const { data } = await getVtdname(this.$route.query.biId)
      this.carType = data;
      this.carType.forEach((item, index) => {
        // this.carType[index].vtdName = this.carType[index].vtdName.slice(item.vtdName.indexOf(' ')+1)
        this.carType[index].changshangzhidaojiaD = this.carType[index].changshangzhidaojia/10000
      })


    },
    goDetail(n) {
      console.log(n)
      let vnid = this.$route.query.id;
      let vtdId = n.vtdId;
      let brand = n.pinpai;
      let carType = n.vtdName;
      let carModelGuidePrice = n.changshangzhidaojia

      this.$router.push({
        name: 
          this.$route.query.myName ||
          localStorage.getItem("carBandPage") ||
          "FindCarForm",
        query: {
          vnid: vnid,
          vtdId: vtdId,
          brand: brand,
          carType: n.chexi + ' ' + carType,
          biId : n.biId,
          idOld: this.$route.query.idOld,
          biName: n.chexi,
          carModelGuidePrice,
          myName:this.$route.query.myName
        },
      })
      localStorage.setItem("carBandPage", "");
      // console.log(query= {
      //     vnid: vnid,
      //     vtdId: vtdId,
      //     brand: brand,
      //     carType: carType,
      //     biId : n.biId,
      //     idOld: this.$route.query.idOld,
      //     biName: n.chexi,
      //     carModelGuidePrice
      //   })
    },
  },
  mounted() {
    // console.log(this.$route.query)
    document
      .querySelector("body")
      .setAttribute("style", "background-color: #F8F8F8");
    this.getCarType();
  },
  created() {
      // 获取屏幕状态栏高度
      this.phoneStatusBarHeight = window.phoneStatusBarHeight
    // this.getCarType()
  },
};
</script>

<style lang='less'>

</style>
<style scoped lang='less'>
.van-cell__title{
  flex: 4;
}
.car-type-item {
  border-bottom: 1px solid #f8f8f8;
  // margin-left: 10px;
}
.blank {
  height: 5px;
  background: #f8f8f8;
}
.navbar {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 46px;
  // background-color: pink;
  font-size: 17px;
  font-family: PingFangSC-Semibold, PingFang SC;
  font-weight: 600;
  color: #000000;
  .navbar-back {
    text-align: center;
    flex: 1;
  }
  .navbar-close {
    text-align: center;
    flex: 1;
  }
  .navbar-title {
    text-align: center;
    flex: 8;
    // padding-left: 20%;
  }
}
</style>
